<template>
    <div class="main" id="maa" ref="maa">
        <canvas ref="drawPainter"></canvas>
    </div>
</template>

<script>
import {MaxAndMin} from "@/api/signal/fileData";

export default {
    name: 'VectorView',
    emits:[],
    components: {},
    props:[
        'vDrawData'
    ],
    computed: {},
    watch: {
        vDrawData: {
            handler: function(newVal, oldVal){
                this.drawData = newVal
                let maxMin = MaxAndMin(this.drawData);
                this.maxVal=maxMin[1]* 1.2;
                this.paint()
            }
        }
    },
    data: function () {
        return {
            drawTypeEnum: {
                VERTICAL: 1,
                BROKEN: 2,
                properties: {
                    1: {name: '竖线', value: 1},
                    2: {name: '折线', value: 2}
                }
            },
            drawType: 1,
            drawRect:{left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0},
            leftPadding: 10,
            rightPadding: 10,
            topPadding: 10,
            bottomPadding: 10,
            rowNum: 2, // 行
            cloumnNum: 2, // 列
            canvas: null, // 画布
            painter: null, //
            drawData: [], // 需要绘制的数据
            minVal:0,
            maxVal:0,
        }
    },
    methods: {
        resetRect: function () {
            this.observer.disconnect()
            this.canvas.width = this.$refs.maa.offsetWidth
            this.canvas.height = this.$refs.maa.offsetHeight
            // 画图区域
            this.drawRect.left = this.leftPadding
            this.drawRect.right = this.canvas.width - this.rightPadding
            this.drawRect.top = this.topPadding
            this.drawRect.bottom = this.canvas.height - this.bottomPadding
            this.drawRect.width = this.canvas.width - this.leftPadding - this.rightPadding
            this.drawRect.height = this.canvas.height - this.topPadding - this.bottomPadding
            this.paint()
            this.observer.observe(this.$refs.maa, { box: "border-box" })
        },
        drawLine: function () {
            this.painter.save()
            this.painter.fillStyle  = '#68f30a'
            this.painter.lineWidth = 1
            let halfWidth = this.drawRect.width/2;
            let halfHeight = this.drawRect.height/2;
            let minViewLen = halfWidth;
            if(minViewLen >halfHeight) minViewLen = halfHeight;
            // this.canvas.clipRect(this.drawRect.left, this.drawRect.top, this.drawRect.width, this.drawRect.height)
            for (let i = this.drawData.length > 3000 ? this.drawData.length - 3000 : 0; i < this.drawData.length; i+=2) {
                this.painter.beginPath();
                this.painter.arc(
                    this.drawData[i] / this.maxVal * minViewLen + halfWidth + this.drawRect.left,
                    this.drawData[i+1]/ this.maxVal * minViewLen + halfHeight + this.drawRect.top,
                    1, 0, Math.PI * 2);
                this.painter.closePath();
                this.painter.fill();
            }
            this.painter.rect(this.drawRect.left, this.drawRect.top, this.drawRect.width, this.drawRect.height)
            this.painter.clip()
            this.painter.restore()
        },
        drawGrid: function () {
            this.painter.save()
            this.painter.strokeStyle = '#cfd9da'
            this.painter.lineWidth = 0.5
            this.painter.beginPath()

            // 画横线
            for (let i = 0; i <= this.rowNum; i++) {
                this.painter.moveTo(this.drawRect.left, this.drawRect.height / this.rowNum * i + this.drawRect.top)
                this.painter.lineTo(this.drawRect.right, this.drawRect.height / this.rowNum * i + this.drawRect.top)
            }

            // 画纵线
            for (let i = 0; i <= this.cloumnNum; i++) {
                this.painter.moveTo(this.drawRect.width / this.cloumnNum * i + this.drawRect.left, this.drawRect.top)
                this.painter.lineTo(this.drawRect.width / this.cloumnNum * i + this.drawRect.left, this.drawRect.bottom)
            }
            this.painter.stroke()
            this.painter.closePath()
            this.painter.restore()
        },
        paint: function () {
            this.painter.clearRect(0, 0, this.canvas.width, this.canvas.height)
            this.drawGrid()
            this.drawLine()
        }
    },
    mounted: function () {
        this.canvas = this.$refs.drawPainter;

        this.canvas.width = this.$refs.maa.offsetWidth
        this.canvas.height = this.$refs.maa.offsetHeight
        this.painter = this.canvas.getContext('2d')
        this.painter.fillStyle = 'rgb(17,248,28)'

        this.observer = new ResizeObserver(this.resetRect);
        this.observer.observe(this.$refs.maa, { box: "border-box" })
        this.resetRect()
        this.paint()
    },
    destroyed: function () {
        this.observer.disconnect()
    }
}
</script>

<style scoped>
.main{
    width: 100%;
    height: 100%;
    background: #2c3e50;
}
</style>
